{% extends 'base.html' %}

{% block title %}{{ cate.name }}{% endblock title %}

{% block hero %}{% endblock hero %}

{% block box %}
<div class="columns">
    <div class="column is-9" style="border-right:solid 1px #eee ;">
        <div class="box is-shadowless has-background-light">
            {% block breadcrumb %}
            <nav class="breadcrumb is-small" aria-label="breadcrumbs">
                <ul>
                <li class="is-active"><a href="#" aria-current="page">{{ cate.name }}</a></li>
                </ul>
            </nav>
            {% endblock breadcrumb %}
        </div>

        {% block cate_box %}
        {% for post in post_list %}
            <div class="pl-2">
                <h1 class="is-size-4">
                    <a href="{{ url_for('blog.detail', cate_id=post.category.cate_id, post_id=post.post_id) }}">{{ post.title }}</a>
                </h1>
                <p class="has-text-grey-light is-size-6 mt-1">
                    <span class="icon"><i class="mdi mdi-clipboard-text-clock-outline"></i></span>{{ post.add_date }}
                    <span class="icon"><i class="mdi mdi-shape-outline"></i></span>{{ post.category.name }}
                    <span class="icon"><i class="mdi mdi-tag-heart-outline"></i></span>{{ post.tags|join(',') }}
                </p>
                <div class="has-text-grey mt-1">{{ post.desc }}</div>
            </div>
            <div class=" dropdown-divider mb-3"></div>
        {% endfor %}
        {% block pagination %}
        <nav class="pagination is-small" role="navigation" aria-label="pagination">
            {% if pagination.has_prev %}
            <a href="{{ url_for('blog.cates', cate_id=cate.cate_id ) }}?page={{ pagination.prev_num }}" class="pagination-previous" title="This is the first page">Previous</a>
            {% endif %}
            {% if pagination.has_next %}
            <a href="{{ url_for('blog.cates', cate_id=cate.cate_id) }}?page={{ pagination.next_num }}" class="pagination-next">Next page</a>
            {% endif %}

            <ul class="pagination-list">        
                {% for page in pagination.iter_pages() %}
                    {% if page %} 
                        {% if page != pagination.page %}
                        <li>
                            <a href="{{ url_for('blog.cates', cate_id=cate.cate_id) }}?page={{ page }}" class="pagination-link" aria-label="Page 1" aria-current="page">{{ page }}</a>
                        </li>
                        {% else %}
                        <li>
                            <a class="pagination-link is-current" aria-label="Page 1" aria-current="page">{{ page }}</a>
                        </li>
                        {% endif %}
                    {% else %}
                        <span class=pagination-ellipsis>&hellip;</span>
                    {% endif %}
                {% endfor %}

            </ul>
        </nav>
        {% endblock pagination %}
        {% endblock cate_box %}
    </div>
</div>
{% endblock box %}